<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			*{
			padding: 0;
			margin: 0 auto;
			box-sizing: border-box;
			}
			#container
			{
				width: 1200px;
				height: auto;
				
			}
			#header
			{
				float: left;
				width: 100%;
			}
			#context
			{
				float: left;
				width: 100%;
				margin-top: 10px;
				margin-left: 60px;
				margin-right: 60px;
			}
			#logo
			{
				float: left;
				margin-top: 10px;
   				margin-left:70px;
			}
			#tab
			{
				margin-top: 40px;
				padding-left: 10px;
				margin-left: 10px;
				float: left;
			    color:#FFFFFF;
			    font-size: 18px;
			}
			#tab div {
		    position: relative;
		    width: 70px;
		    height: 30px;
		    border: 1px solid #cccccc;
		    border-bottom: 0px;
		    text-align: center;
		    border-radius: 8%;
		    float: left;
		    margin-left: 10px;
		    background: aliceblue;
			}	
			#tab div  a{
			    position: absolute;
			    margin-top: 3px;
			    right: 18px;
			    font-weight: bold;
			     color: #006400;
			}
			#operator
			{
				float: right;
				font-size: 15px;
				color: #495FAE;
				margin-top: 5px;
				margin-right: 70px;
			}
			#mune
			{
				float: left;
				width: 100%;
				color:#FFFFFF;
				background:#EE7700 ;
			}
			#mune a{
				margin-left: 15px;
				font-size: 15px
			}
			#left
			{
				float: left;
				width: 20%;
				
			}
			#left1{
				border: #D8D2CB 1px solid;
				margin-bottom: 10px;
			}
			#right
			{
				float: left;
				width: 70%;
			}
			#lt1
			{
				background: #FFF0D9;
				color: #B55620;
				font-size: 20px;
				font-weight:bold;
			}
			#lt1 a{
				margin-left: 5px;
			}
			#lt2
			{
				background: #FAFAFA;
				color: #000000;
				 font-weight:bold;
			}
			#lt2 a{
				margin-left: 6px;
			}
			li{
				list-style: none;
				font-size: 15px;
				margin-left: 15px;
				margin-bottom: 5px;
			}
			
			#lt3{
				float: left;
			}
			#laybord{
				width: 20%;
				float: left;
				margin: 10px;
				
			}
			#laybord1{
				margin-bottom: 10px;
				border: #D8D2CB 1px solid;
			}
			#today
			{
				width: 75%;
				margin: 10px;
				float: left;
			}
			#r1{
				width: 100%;
				float: left;
			}
			#r2
			{
				float: left;
				width: 100%;
				margin: 10px;
			}
			#line{
				float: left;
				width: 100%;
			}
			#goods
			{
				width: 23%;
				float: left;
				margin: 6px;
				margin-top: 10px;
			}
			#goods1
			{
				width: 15%;
				float: left;
				margin: 6px;
				margin-top: 10px;
			}
			#mune2
			{
				float: left;
				width: 100%;
				color:#000000;
				background:#D8D2CB ;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="logo"><a border="1"><img src="img/logo.gif" /></a></div>
				<div id="tab">
					<div style="float: left;background: #EE7700;"><a style="color:#F0F8FF;">首页</a></div>
			        <div style="float: left;"><a >图书</a></div> 
			        <div style="float: left;"><a>百货</a> </div>
			        <div style="float: left;"><a>品牌</a> </div>
			        <div style="float: left;"><a>促销</a></div>
				</div>
				<div id="operator">
					<span style="background: url(img/bg.png)0px -68px;">&nbsp;&nbsp;&nbsp;</span>
					<a href="shopping.html">购物车</a>
					<a href="login.html">登录</a>
					<a href="resiger.html">注册</a>
					<a href="guestbook.html">留言</a>
				</div>
			</div>
			<div id="mune">
				<a style="margin-left: 70px;">音乐</a>
				<a>影视</a>
				<a>少儿</a>
				<a>动漫</a>
				<a>小说</a>
				<a>外语</a>
				<a>数码照相机</a>
				<a>笔记本</a>
				<a>羽绒服</a>
				<a>秋冬靴</a>
				<a>运动鞋</a>
				<a>美容护肤</a>
				<a>家纺用品</a>
				<a>婴幼奶粉</a>
				<a>饰品</a>
				<a>Investor Redations</a>
			</div>
			<div id="context">
				<div id="left">
					<div id="left1">
							<div id="lt1" ><a>商品分类</a></div>
					<div>
						<div id="lt2" ><a>图书影像</a></div>
						<ul>
							
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>图书</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>音乐</li>
						</ul>
					</div>
					<div >
						<div id="lt2"><a>百货</a></div>
						<ul>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>运动健康</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>服装</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>家具</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>美妆</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>母婴</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>食品</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>手机数码</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>家具首饰</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>手表饰品</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>鞋包</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>家电</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>电脑办公</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>玩具文具</li>
							<li><span style="background: url(img/bg.png)-238px -87px;">&nbsp;&nbsp;&nbsp;</span>汽车饰品</li>
						</ul>
					</div>
					</div>
				    <div id="left1" >
							<div id="lt1">最近浏览</div>
							
							<div id="lt3">
								<div style="float: left;"><img src="img/0_tiny.gif"></div>
								<div><a>法国德菲丝松露精品巧克力500g/盒</a></div>
							</div>
							<div id="lt3">
								<div style="float: left;"><img src="img/0_tiny.gif"></div>
								<div><a>法国德菲丝松露精品巧克力500g/盒</a></div>
							</div>
					</div>
				</div>
				<div id="right">
					<div id="r1" >
						<div id="today">
							<span style="background: url(img/bg.png)-235px -105px;">&nbsp;&nbsp;&nbsp;</span>
							<a>今日特价</a>
							<hr size="4" color="#EE7700">
							<div id="line">
								<div id="goods">
									<div ><img src="img/1.jpg"></div>
									<div><a>法国德菲丝松露精品巧克力500g/盒</a></div>
									<div><a>&yen;108.00</a></div>
								</div>
								<div id="goods">
									<div><img src="img/2.jpg"></div>
									<div><a>乐扣普通型保险盒圣诞7件套</a></div>
									<div><a>&yen;69.90</a></div>
								</div>
								<div id="goods">
									<div ><img src="img/3.jpg"></div>
									<div><a>欧珀莱均衡保湿四件套</a></div>
									<div><a>&yen;279.00</a></div>
								</div>
								<div id="goods">
									<div ><img src="img/4.jpg"></div>
									<div><a>联想笔记本电脑高速独立显存</a></div>
									<div><a>&yen;4199.00</a></div>
								</div>
							</div>
							<div id="line">
								<div id="goods">
									<div ><img src="img/5.jpg"></div>
									<div><a>法资韩版显瘦彩边时尚牛仔铅笔裤</a></div>
									<div><a>&yen;49.00</a></div>
								</div>
								<div id="goods">
									<div ><img src="img/6.jpg"></div>
									<div><a>Genius925纯银施华洛世奇水晶吊坠</a></div>
									<div><a>&yen;69.90</a></div>
								</div>
								<div id="goods">
									<div ><img src="img/7.jpg"></div>
									<div><a>利仁2018M福苪堂电饼铛好用实惠</a></div>
									<div><a>&yen;268.00</a></div>
								</div>
								<div id="goods">
									<div ><img src="img/8.jpg"></div>
									<div><a>大牌高档拉杆箱20寸 经典款式</a></div>
									<div><a>&yen;198.00</a></div>
								</div>
							</div>
						</div>
						<div id="laybord">
							<div id="laybord1">
								<div id="lt2"><a>最新公告</a></div>
								<div>
									<ul>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
									</ul>
								</div>
							</div>
							<div id="laybord1">
								<div id="lt2"><a>新闻动态</a></div>
								<div>
									<ul>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
										<li><span style="background: url(img/bg.png)-240px -157px;">&nbsp;&nbsp;</span>抢钱啦</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div id="r2">
						<span style="background: url(img/bg.png)-235px -105px;">&nbsp;&nbsp;&nbsp;</span>
						<a>热卖推荐</a>
						<hr size="4" color="#EE7700">
						<div id="line">
							<div id="goods1">
								<div ><img src="img/1.jpg"></div>
								<div><a>法国德菲丝松露精品巧克力500g/盒</a></div>
								<div><a>&yen;108.00</a></div>
							</div>
							<div id="goods1">
								<div><img src="img/2.jpg"></div>
								<div><a>乐扣普通型保险盒圣诞7件套</a></div>
								<div><a>&yen;69.90</a></div>
							</div>
							<div id="goods1">
								<div ><img src="img/3.jpg"></div>
								<div><a>欧珀莱均衡保湿四件套</a></div>
								<div><a>&yen;279.00</a></div>
							</div>
							<div id="goods1">
								<div ><img src="img/4.jpg"></div>
								<div><a>联想笔记本电脑高速独立显存</a></div>
								<div><a>&yen;4199.00</a></div>
							</div>
							<div id="goods1">
								<div ><img src="img/5.jpg"></div>
								<div><a>法资韩版显瘦彩边时尚牛仔铅笔裤</a></div>
								<div><a>&yen;49.00</a></div>
							</div>
							<div id="goods1">
								<div ><img src="img/6.jpg"></div>
								<div><a>Genius925纯银施华洛世奇水晶吊坠</a></div>
								<div><a>&yen;69.90</a></div>
							</div>
						</div>
						<div id="line">
							<div id="goods1">
									<div ><img src="img/7.jpg"></div>
									<div><a>利仁2018M福苪堂电饼铛好用实惠</a></div>
									<div><a>&yen;268.00</a></div>
								</div>
							<div id="goods1">
									<div ><img src="img/8.jpg"></div>
									<div><a>大牌高档拉杆箱20寸 经典款式</a></div>
									<div><a>&yen;198.00</a></div>
								</div>
							<div id="goods1">
									<div ><img src="img/9.jpg"></div>
									<div><a>爱国者MP4全屏触摸多格式播放4G</a></div>
									<div><a>&yen;289.00</a></div>
								</div>
							<div id="goods1">
									<div ><img src="img/10.jpg"></div>
									<div><a>多美滋金装金盾3阶段幼儿配方奶粉</a></div>
									<div><a>&yen;186.00</a></div>
								</div>
							<div id="goods1">
									<div ><img src="img/1.jpg"></div>
									<div><a>法国德菲丝松露精品巧克力500g/盒</a></div>
									<div><a>&yen;108.00</a></div>
								</div>
							<div id="goods1">
									<div><img src="img/2.jpg"></div>
									<div><a>乐扣普通型保险盒圣诞7件套</a></div>
									<div><a>&yen;69.90</a></div>
								</div>
						</div>
					</div>
				</div>
			</div>
			<div id="mune2">
				<a style="margin-left: 35%;">Copyright &copy; 2016 东方睿智 All Rights Reserved.京ICP证1000001号</a>
			</div>
		</div>
	</body>
</html>
